<template>
  <div class="_wz_tableRoll">
    <div class="_wz_tableRoll_div">
      <table cellspacing="0" cellpadding="0" border="0" class="_wz_tableRoll_head">
        <colgroup>
          <template v-for="item in headData">
            <col :width="!!item.width ? item.width : ''">
          </template>
        </colgroup>
        <tr>
          <template v-for="item in headData">
            <th>{{item.name}}</th>
          </template>
        </tr>
      </table>
      <div style="height: calc(100% - 38px);overflow: hidden;">
        <vue3-seamless-scroll  hover-stop="true" :list="dataList" hover="true" step="0.3">
          <table cellspacing="0" cellpadding="0" border="0" class="_wz_tableRoll_body">
            <colgroup>
              <template v-for="item in headData">
                <col :width="!!item.width ? item.width : ''">
              </template>
            </colgroup>
            <template v-for="item in dataList">
              <tr>
                <template v-for="items in headData">
                  <td>{{item[items.key]}}</td>
                </template>
              </tr>
            </template>
          </table>
        </vue3-seamless-scroll>
      </div>
    </div>

  </div>
</template>
<script>

import {computed,getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'
import dayjs from "dayjs";
import {getMenu} from "@/util/getMenu";
import {getFirstMenu} from "@/router/dynamicRouting";
//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex



//reactive
export default defineComponent({
  name: 'tableRoll',//组件名称
  components: {
  },//组件引用
  props:['tableData'],
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const $dayjs = inject('$dayjs');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法

    //监听
    watch(() => props.tableData,(news, old) => {
      loadInit()
    },{deep: true});

    const state = reactive({
      headData:[],
      dataList:[],

    });


    let  defaultOption = computed(()=>{
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    })


    //页面加载初始化
    const loadInit = ()=>{

      state.headData = !!props.tableData && !!props.tableData.headData ? props.tableData.headData : [];
      state.dataList = !!props.tableData && !!props.tableData.dataList ? props.tableData.dataList : [];

    }



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      loadInit()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      defaultOption,
    }
  }
})


</script>
<style lang="less">
._wz_tableRoll{
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px;
  ._wz_tableRoll_div{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    ._wz_tableRoll_head{
      table-layout: fixed;
      width: 100%;
      height: 38px;
      overflow: hidden;
      background: url("@/assets/opera/itembg-title.png");
      background-size: 100%;
      th{
        position: relative;
        height: 100%;
        padding: 8px 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        border-bottom: 1px solid #096c79;
        color: #fff;
      }
    }

    ._wz_tableRoll_body{
      table-layout: fixed;
      width: 100%;
      td{
        text-align: center;
        min-width: 0;
        height: 28px;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        border-bottom: 1px solid #096c79;
        color: #fff;
        background: rgba(0,0,0,0.2);
        //background-color: #0f3467;
        padding: 0 3px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

      }

    }
  }

}

</style>
